<!--团队人员-->
<template>
	<view class="hasTeam">
		<uni-top fixed="true" statusBar="true" class="top" border="" background-color="#585cf7" color="#fff"
			left-text="团队"></uni-top>
		<view class="user">
			<view class="wrap">
				<view class="top">
					<view class="img_wrap">
						<image class="user_img" mode="aspectFit" :src="userInfo.icon"></image>
					</view>
					<view class="right">
						<view class="name_wrap">
							<text class="name">{{teamName}}</text>
							<text class="level">官方合伙人</text>
						</view>
						<view class="process">
							<text class="levT"> T{{ currentLeveL || 0}}</text>
							<progress class="jdt" :percent="percent || 0" active stroke-width="4"
								activeColor="#585cf7" />
							<text class="levT">T{{ nextLeveL || 0}}</text>
						</view>
						<view class="intro">距下一级合伙人还需要{{needExperience}}元</view>
					</view>
				</view>
				<view class="center">
					<view class="title">即将获得:</view>
					<view class="list_wrap">
						<view v-for="(item, index) in dataList" :key="index" class="list_item">{{item}}</view>
					</view>
				</view>
			</view>
		</view>
		<!--end  user-->
		<view class="notice">
			<view class="top">
				<view class="left">
					<text class="info uniicons">&#xe504;</text>
					<text class="title">团队公告</text>
				</view>
				<view class="right">
					<text class="edit uniicons" @click="addNoticeBtn">&#xe400;</text>
				</view>
			</view>
			<textarea class="bottom" v-model="notice" auto-height disabled>

			</textarea>
		</view>
		<view class="notice">
			<view class="top">
				<view class="left">
					<image src="../../../static/image/page/dz-icon.png" class="dz-icon" mode=""></image>
					<!-- <text class="info uniicons">&#xe504;</text> -->
					<text class="title">团队地址</text>
				</view>
				<view class="right">
					<text class="edit uniicons" @click="editAddress">&#xe400;</text>
				</view>
			</view>
			<textarea class="bottom" v-model="teamIntro.address" auto-height disabled>

			</textarea>
		</view>
		<!--end notice-->
		<view class="team_title">
			<view class="left">
				<text class="title">团队收益</text>
			</view>
			<view class="right">
				<text class="shouyi">了解额外奖金计算规则？</text>
			</view>
		</view>
		<view class="team_name">
			<view class="top">
				<view class="left">
					<text class="title">团队名称</text>
				</view>
				<view class="right">
					<text class="open_join" @click="openJoin">{{teamOwn.isOpenJoin?'取消开放加入':'开放加入'}}</text>
				</view>
			</view>
			<view class="name_wrap">
				<view class="name">{{teamIntro.teamName}}</view>
				<view class="sub_name">{{teamIntro.brief}}</view>
				<text class="edit uniicons" @click="openTeamIntro">&#xe400;</text>
			</view>
			<view class="bonus_wrap">
				<view class="time_select">
					<picker mode="date" :end="nowTime" fields="month" @change="handleDate">
						<view class="time_month">{{ time }}<text class="triangle-down"></text></view>
					</picker>
				</view>
				<view class="bonus">
					<view class="left">
						<view>￥<text class="money">{{teamCon.closeMoney}}</text>万</view>
						<view class="tip_name">计入业绩</view>
					</view>
					<view class="right">
						<view>￥<text class="money">{{teamCon.teamMoney}}</text></view>
						<view class="tip_name">预估奖金</view>
					</view>
				</view>
				<view class="bottom_tips">奖金分配规则：合伙人占比20%，经纪人占比80%</view>
			</view>

			<view class="bottom">
				<view class="sub_title">业绩与奖金</view>
				<view v-if="!teamList.length">当前还未创建团队</view>
				<view v-else class="team_scroll" style="overflow: hidden;">
					<scroll-view class="scroll_v list" scroll-y>
						<view class="team_cap">
							<view class="tips">团队长奖金</view>
							<view class="item_wrap">
								<view class="img_wrap">
									<image class="img" :src="teamCap.icon" mode="aspectFit">
									</image>
								</view>
								<view class="center">
									<view class="name">{{teamCap.empName || userInfo.empName}}</view>
									<view class="text">
										进件{{teamCap.total || 0}}个，业绩{{teamCap.closeIncome || 0}}万
									</view>
								</view>
								<view class="right">
									￥<text class="monet">{{teamCap.bonus || 0}}</text>
									<uni-icons type="arrowright"></uni-icons>
								</view>
							</view>
						</view>
						<!--end team_cap-->
						<view class="team_mem" v-if="teamMember.length > 0">
							<view class="tips">成员奖金</view>
							<block v-for="(item,index) in teamMember" :key="item.id">
								<view class="item_wrap" @click="toUserDet">
									<view class="img_wrap">
										<image class="img" :src="item.icon" mode="aspectFit"></image>
									</view>
									<view class="center">
										<view class="name">{{item.empName}}</view>
										<view class="text">
											进件{{item.total}}个，业绩{{item.closeIncome}}万
										</view>
									</view>
									<view class="right">
										￥<text class="monet">{{item.bonus}}</text>
										<uni-icons type="arrowright"></uni-icons>
									</view>
									<!-- <text v-if="item.isExit" @click.stop="handle(false,item.empName,item.id)"
										class="err_status">申请退出</text> -->
									<!-- <text v-if="item.isJoin" @click.stop="handle(true,item.empName,item.id)"
										class="err_status">申请加入中</text> -->
								</view>
							</block>
						</view>
						<view class="team_mem" v-else>
							<!-- 	<image class="no_par" src="../../../static/image/page/noCom.png"></image>
							<text>暂无团员</text> -->
						</view>
						<!--end team_mem-->
					</scroll-view>
				</view>
			</view>
			<wyb-button class="btn scrool_btn" :ripple="true" type="plain" color="#585cf7" :radius="radius" width="100%"
				height="80rpx" font-size="32rpx" @click="inviteUser">邀请成员</wyb-button>
		</view>
		<!--end team_name-->

		<!--弹窗 编辑公告-->
		<uni-popup ref="showtip" type="center" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">编辑公告</text>
				<view class="uni-tip-content">
					<textarea placeholder="编辑公告" class="pop_notice" v-model="popNotice" />
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button border-r" @click="cancel('tip')">取消</text>
					<text class="uni-tip-button" style="color: #007aff;" @click="addNotice">确定</text>
				</view>
			</view>
		</uni-popup>
		<!-- 团队地址 -->
		<uni-popup ref="showaddress" type="center" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">编辑地址</text>
				<view class="address-box">
					<textarea  name="address" :disabled="!isSelectAddress" v-model="address" 
						class="gg-textarea address-text" placeholder="请选择地址" maxlength="-1"></textarea>
					<image @click="chooseAddress" src="../../../static/image/page/dz-icon.png" class="dz-icon" mode="">
					</image>
					<!-- <image @click="chooseAddress" src="/images/index/dz-icon.png" class="dz-icon"></image> -->
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button border-r" @click="closeAddress()">取消</text>
					<text class="uni-tip-button" style="color: #007aff;" @click="addAddress()">确定</text>
				</view>
			</view>
		</uni-popup>
		<!--弹窗 获取团队概述名称-->

		<uni-popup ref="teamIntro" type="center" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">编辑团队信息</text>
				<view class="uni-tip-content">
					<view class="text_title">团队名称<text class="red must">*</text></view>
					<input class="text_input" placeholder="填写团队名称" v-model="popTeamIntro.teamName" />
					<view class="text_title">团队介绍 <text class="red must">*</text></view>
					<textarea placeholder="填写团队介绍" class="text_textarea" v-model="popTeamIntro.brief" />
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button border-r" @click="cancelTeamIntro('tip')">取消</text>
					<text class="uni-tip-button" style="color: #007aff;" @click="addTeamIntro">确定</text>
				</view>
			</view>
		</uni-popup>

		<wyb-modal ref="modal" title="团员审批" :content="modCon" cancel-text="不同意" confirm-text="同意" cancel-color="#ff4c29"
			confirmColor="#585cf7" :async-close="true" :mask-click-close="true" @cancel="onCancelClick"
			@confirm="onConfirmClick">
		</wyb-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		name: "hasTeam",
		computed: {
			...mapState(["userInfo"]),
		},
		data() {
			return {
				radius: ["100px"],
				currentLeveL: 0,
				nextLeveL: 0,
				percent: 0,
				needExperience: 0,
				teamName: "",
				notice: "",
				popNotice: "",
				dataList: ["业绩额外奖金点数升级为0.8%", "团队成员上线升级为30人"],
				nowTime: "",
				time: "",
				teamCap: {
					empName: '',
					total: 0,
					closeIncome: 0,
					bonus: 0
				},
				teamMember: [],
				teamList: [],
				teamCon: {
					closeMoney: 0,
					teamMoney: 0,
				},
				teamIntro: {},
				popTeamIntro: {},
				modCon: "团员审批",
				modStatus: false,
				modId: 0,
				address: '', //地址
				la: 0,
				lo: 0,
				isSelectAddress: false,
				teamOwn:{},
			}
		},
		created() {
			this.start();
		},
		methods: {
			//开放加入
			openJoin(){
				this.$api.isOpenJoin().then(res=>{
					this.teamOwn.isOpenJoin=!this.teamOwn.isOpenJoin
				})
			},
			//编辑地址
			addAddress() {
					this.$api.updateLocation({
						la:this.la,
						lo:this.lo,
						addAddress:this.addAddress
					}).then(res=>{
						uni.showToast({
							title:'修改成功'
						})
						this.teamIntro.address=this.address;
						this.closeAddress();
					})
			},
			//选择地址
			chooseAddress() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						const latitude = res.latitude
						const longitude = res.longitude
						uni.chooseLocation({
							latitude,
							longitude,
							success: (rt) => {
								// console.log(rt)  todo
								this.address = rt.address + rt.name;
								this.la = +rt.latitude;
								this.lo = +rt.longitude;
								this.isSelectAddress = true;
							}
						})
					}
				})
			},
			//关闭地址弹层
			closeAddress() {
				this.$refs.showaddress.close();
				this.isSelectAddress = false;
			},
			//显示编辑地址弹层
			editAddress() {
				this.$refs.showaddress.open()
			},
			//邀请成员
			inviteUser() {
				this.$api.getTeamCode().then(res => {
					let imgUrl = [];
					imgUrl[0] = res.data.data.url;
					uni.previewImage({
						urls: imgUrl
					});
				})
			},
			//处理申请退出，申请加入
			handle(status, name, id) {
				if (status) {
					this.modCon = "是否同意 " + name + " 进入我的团队"
				} else {
					this.modCon = "是否同意 " + name + " 退出我的团队"
				}
				this.modStatus = status
				this.modId = id
				this.$refs.modal.showModal()
			},
			onConfirmClick() {
				this.$api.teamConsent({
					type: 1,
					id: this.modId
				}).then(res => {
					this.getTeamIncome({
						date: this.time
					});
					setTimeout(() => {
						this.$refs.modal.hideModal()
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}, 500)
				}).catch((res) => {
					setTimeout(() => {
						this.$refs.modal.hideModal()
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}, 500)
				})

			},
			onCancelClick() {
				this.$api.teamConsent({
					type: 0,
					id: this.modId
				}).then(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				})
			},

			//查看团员详情
			toUserDet() {
				console.log("查看团员详情")
			},
			start() {
				let obj = {};
				if (this.time) {
					obj.date = this.time;
				} else {
					//获取当前时间
					let timestamp = Date.parse(new Date());
					let date = new Date(timestamp);
					//获取年份  
					let Y = date.getFullYear();
					//获取月份  
					let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
					var time = Y + "-" + M
					this.time = time;
					this.nowTime = time;
					obj.date = time;
				}
				this.getTeamOwn();
				this.getTeamNotice();
				this.getTeamIncome(obj);
				this.getTeamIntro()
			},
			handleDate(e) {
				let time = e.detail.value;
				this.time = time;
				this.getTeamIncome({
					date: time
				});
			},
			//我要升级
			updateLevel() {
				let userData = JSON.parse(JSON.stringify(this.userInfo))
				userData.teamPartnerStatus = 0;
				this.$store.commit("SET_USERINFO", userData);
			},
			//获取团队个人信息
			getTeamOwn() {
				this.$api.getTeamOwn().then(res => {
					let resData = res.data.data;
					this.currentLeveL = resData.currentLeveL;
					this.nextLeveL = resData.nextLeveL;
					this.percent = resData.rate * 100;
					this.needExperience = resData.needExperience;
					this.teamName = resData.teamName;
					this.dataList = resData.rewardText ? resData.rewardText.split(";") : [],
					this.teamOwn=resData;
				})
			},
			//获取团队公告
			getTeamNotice() {
				this.$api.getTeamNotice().then(res => {
					this.notice = res.data.data;
				})
			},
			//编辑公告按钮
			addNoticeBtn() {
				this.popNotice = JSON.parse(JSON.stringify(this.notice));
				this.$refs.showtip.open()
			},
			//取消
			cancel(type) {
				this.$refs.showtip.close()
			},
			//添加公告
			addNotice() {

				this.$api.updateTeamNotice({
					notice: this.popNotice
				}).then(res => {
					this.$refs.showtip.close();
					this.notice = JSON.parse(JSON.stringify(this.popNotice));
					uni.showToast({
						title: "操作成功",
						duration: 2000
					});
				})
			},
			//获取团队收益
			getTeamIncome(data) {
				this.$api.getTeamIncome(data).then(res => {
					let resData = res.data.data;
					let resList = resData.list;
					this.teamCon.closeMoney = resData.closeMoney;
					this.teamCon.teamMoney = resData.teamMoney;
					this.teamList = resList;
					this.teamCap = resList[0];
					this.teamMember = resList.slice(1) || [];
				})
			},
			//获取团队概述名称,介绍
			getTeamIntro() {
				this.$api.getTeamIntro().then(res => {
					this.teamIntro = res.data.data;;
				})
			},
			//打开团队名称弹框
			openTeamIntro() {
				this.popTeamIntro = JSON.parse(JSON.stringify(this.teamIntro));
				this.$refs.teamIntro.open()
			},
			cancelTeamIntro(type) {
				this.$refs.teamIntro.close()
			},
			//编辑团队名称，介绍
			addTeamIntro() {
				let data = JSON.parse(JSON.stringify(this.popTeamIntro));
				let that = this;
				if (data.teamName && data.brief) {
					that.$api.updateTeamName(data).then(res => {
						that.$refs.teamIntro.close();
						that.teamIntro = data;
						uni.showToast({
							title: "操作成功",
							duration: 2000
						});
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "请填写非空选项",
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.user {
		padding: 20rpx 30rpx 0;
		background: linear-gradient(to bottom, $dtg-color-primary 0%, $dtg-color-primary 35%, #f8f8f8 36%, #f8f8f8 100%);
		margin-bottom: 20rpx;

		.wrap {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 30rpx;

			.top {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				
				// padding-right: 100rpx;
.right{
	flex: 1;
}
				.user_img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 36rpx;
				}

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-right: 20rpx;
				}

				.level {
					background: #F96363;
					border-radius: 4px;
					padding: 4rpx 10rpx;
					font-size: 22rpx;
					color: #FFFFFF;
				}

				.process {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 100rpx;
					margin: 20rpx 0;
				}

				.levT {
					font-family: unidin;
					font-size: 28rpx;
					font-weight: bold;
					font-style: italic;
					color: #333333;
				}

				.jdt {
					margin: 0 15rpx;
				}

				.intro {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.center {
				.title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					line-height: 58rpx;
				}

				.list_item {
					font-size: 26rpx;
					color: #999999;
					line-height: 40rpx;
					padding-left: 72rpx;
					position: relative;
				}

				.list_item:before {
					content: "";
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background: $dtg-color-primary;
					position: absolute;
					left: 42rpx;
					top: 18rpx
				}
			}

			.bottom {
				width: 550rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-top: 34rpx;
			}
		}
	}

	.notice {
		padding: 20rpx 30rpx;
		background: white;
		margin: 0 30rpx 20rpx;
		border-radius: 20rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}

		.info {
			color: $dtg-color-primary;
			font-size: 40rpx;
			margin-right: 10rpx;
		}

		.edit {
			color: #999999;
			font-size: 40rpx;
		}

		.bottom {
			margin: 20rpx 0;
			font-size: 26rpx;
			width: 100%;
		}
	}

	.team_name {
		padding: 20rpx 30rpx;
		background: white;
		margin: 0 30rpx 20rpx;
		border-radius: 20rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}

		.open_join {
			font-size: 26rpx;
			color: $dtg-color-primary;
		}

		.name_wrap {
			padding: 0 48rpx;
			text-align: center;
			position: relative;
			margin: 20rpx 0;

			.name {
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.sub_name {
				font-size: 24rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: center;
			}

			.edit {
				color: #999999;
				font-size: 40rpx;
				position: absolute;
				top: calc(50% - 20rpx);
				right: 0;
			}
		}

		.bonus_wrap {
			background: #F8F8F8;
			border-radius: 10px;
			overflow: hidden;

			.time_select {
				display: inline-block;
			}

			.time_month {
				position: relative;
				font-size: 22rpx;
				color: #999999;
				height: 66rpx;
				line-height: 66rpx;
				padding: 0 20rpx;
			}

			.triangle-down {
				position: absolute;
				top: calc(50% - 6rpx);
				left: 130rpx;
			}

			.bonus {
				padding: 0 30rpx 20rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.left,
			.right {
				text-align: center;
			}

			.money {
				font-size: 44rpx;
				font-weight: bold;
				color: #333333;
			}

			.tip_name {
				font-size: 26rpx;
				color: #999999;
			}

			.bottom_tips {
				background: #F8E9E9;
				font-size: 22rpx;
				color: #F96363;
				text-align: center;
				line-height: 50rpx;
			}
		}

		.bottom {
			background: #FFFFFF;
			margin-top: 20rpx;

			.sub_title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 32rpx;
				margin-bottom: 10rpx;
			}
		}

		.team_scroll {
			border-bottom: 1px solid #eeeeee;

			.scroll_v {
				max-height: 600rpx;
			}

			.tips {
				font-size: 22rpx;
				font-weight: 500;
				color: $dtg-color-primary;
				line-height: 40rpx;
				margin-top: 10rpx;
			}

			.item_wrap {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				width: 100%;
				position: relative;
			}

			.img_wrap,
				{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.img {
				width: 100%;
				height: 100%;
			}

			.center {
				flex: 1;
				padding-left: 20rpx;
			}

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				line-height: 52rpx;
			}

			.text {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}

			.monet {
				font-size: 28rpx;
				font-weight: bolder;
				color: #333333;
			}

			.team_cap {
				border-bottom: 1px solid #eeeeee;
			}

			.err_status {
				position: absolute;
				right: 20rpx;
				bottom: 4rpx;
				color: #F96363;
				font-size: 22rpx;
			}
		}
	}

	.team_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
		width: 690rpx;
		margin: 0 auto;

		.title {
			font-size: 32rpx;
			font-weight: 800;
			color: #333333;
		}

		.shouyi {
			font-size: 22rpx;
			color: $dtg-color-primary;
		}
	}

	.scrool_btn {
		margin-top: 40rpx;
	}

	.pop_notice {
		width: 100%;
		font-size: 28rpx;
	}

	.dz-icon {
		width: 29rpx;
		height: 33rpx;
		margin-right: 20rpx;
	}

	.address-box {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		height: 200rpx;
	}

	.gg-textarea {
		width: 100%;
		height: 150rpx;
		background-color: #e9e9e9;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 50rpx;
		margin-right: 10rpx;
	}
</style>
